<template>
	<view class="login">
		<view class="login-title">
			<text>欢迎登录图书商城</text>
		</view>
		<view class="login-email">
			<u--input placeholder="请输入邮箱" border="surround" clearable v-model="email" focus></u--input>
			<view class="login-email-tip">
				<text v-show="isShowTip">请输入正确的邮箱</text>
			</view>
		</view>
		<view class="login-password">
			<u--input placeholder="请输入密码" border="surround" password clearable v-model="password"></u--input>
		</view>
		<view class="login-button">
			<u-button type="primary" text="登录" size="normal" :disabled="isShowBtn" :style="btnStyle" @click="loginClick" :loading="isShowBtnLoading"></u-button>
		</view>
		<view class="login-bottom">
			<navigator class="login-find-password" url="/pages/auth/password">
				找回密码
			</navigator>
			<navigator class="login-register" url="/pages/auth/register">
				注册
			</navigator>
		</view>
	</view>
</template>

<script>
	import {authLogin,getUserInfo} from '../../config/api.js'
	export default {
		data() {
			return {
				// 邮箱
				email: '',
				// 密码
				password: '',
				// 邮箱提示语是否显示状态
				isShowTip: false,
				// 登录按钮是否禁用状态
				isShowBtn: true,
				// 登录按钮的加载是否显示
				isShowBtnLoading:false,
			};
		},
		computed:{
			btnStyle() {
				// 默认按钮禁用
				this.isShowBtn = true
				let style = {};
				// 按钮禁用时样式
				if(this.isShowBtn == true){
					style.color = "#6a6c71";
				}
				// 邮箱一输入就显示提示文字
				if(this.email){
					this.isShowTip=true
				}
				// 邮箱验证通过文字隐藏
				if(this.$u.test.email(this.email)){
					this.isShowTip=false
				}
				// 邮箱验证通过且输入了密码
				if(this.$u.test.email(this.email) && this.password) {
					this.isShowBtn = false
					style.color = "";
				}
				return style;
			}
		},
		methods:{
			// 点击登录按钮触发
			async loginClick(){
				try{
					// 登录按钮的加载显示
					this.isShowBtnLoading = true
					const params = {
						email:this.email,
						password:this.password
					}
					// console.log(params)
					const res = await authLogin(params)
					// 登录按钮的加载隐藏
					this.isShowBtnLoading = false
					// 缓存token到vuex
					this.$u.vuex('vuex_token',res.access_token)
					// 更新用户信息
					this.$u.utils.setUserInfo()
					
					uni.showToast({
						title:"登录成功！"
					})
					// 获取某页面地址(某页面跳转至登录页面)
					setTimeout(()=>{
						const url=uni.getStorageSync("lastPath") || "/pages/index/index"
						this.$u.route({type:"reLaunch",url:url})
					},1500)
					
					
				}catch(e){
					this.isShowBtnLoading = false
				}
			},
			// 点击注册触发
			toRegister(){
				this.$u.route({type:'navigateTo',url:'pages/auth/register'})
			}
		},
		onLoad({email,password}){
			this.email = email
			this.password = password
		}
	}
</script>

<style lang="scss">
	.login {
		padding: 80rpx;

		// 标题样式
		.login-title {
			text-align: center;
			font-weight: 700;
			font-size: 60rpx;
			height: 200rpx;
		}

		// 输入框样式
		.login-email,
		.login-password {
			margin-bottom: 20rpx;
		}

		// 邮箱提示
		.login-email-tip {
			color: red;
			font-size: 24rpx;
		}
		// 底部找回密码和注册样式
		.login-bottom{
			margin-top: 20rpx;
			display: flex;
			justify-content: space-between;
			font-size: 30rpx;
			color: #555555;
		}
	
	}
</style>
